<template>
  <div class="swtich-wrapper">
    <!-- 视频部分 -->
    <div class="block video-box" v-if="renderType == 'video'">
      <div class="content">
        <MvVideoPlayer type="flvPlayer" :url="list[0]"></MvVideoPlayer>
      </div>
    </div>

    <!-- 情报版部分 -->
    <div class="block qbb-box" v-if="renderType == 'qbb'">
      <div class="content scroll-hover">
        <div class="qbb-row" v-for="(item, index) in list" :style="randomColor(index)" :key="item.message">
          {{ item.message }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Switch'
}
</script>
<script setup>
/**
 * @desc  视频/情报版  切换组件
 * @author 邓清波
 * @date 2022/10/14
 * **/
import { toRefs, defineProps } from 'vue'
import MvVideoPlayer from '@/components/video-player/VideoPlayer'
const props = defineProps({
  renderType: {
    type: String,
    default: 'video' //  video || qbb
  },
  list: {
    type: Array,
    default: () => []
  },
  textPosition: {
    type: String,
    default: 'top'
  }
})

const { list, renderType, textPosition } = toRefs(props)

// 先写个随机的
function randomColor(index) {
  return { color: index % 2 == 0 ? '#FF2424' : '#15C16A' }
}
</script>
<style lang="less" scoped>
.swtich-wrapper {
  width: 100%;
  height: 100%;
  .block {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .title {
      height: 40px;
      font-size: 15px;
      display: flex;
      justify-content: center;
      align-items: center;

      .title-text {
        font-size: 13px;
        margin: 5px 0 11px 0;
        height: 20px;
        padding: 0 2%;
        width: 200px;
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        justify-content: center;
        align-content: center;
      }
    }

    .content {
      width: 100%;
      height: 100%;
    }
  }

  .qbb-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .qbb-row {
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      border: 2px solid #ccd8ec;
      margin-bottom: 14px;
      background-color: #ffffff;
    }
  }
}

.svg-icon {
  cursor: pointer;
  font-size: 12px;
}
</style>
